import { ReactNode } from "react";
import styles from "./index.module.scss";

// 声明 接收属性的类型
// 1 直接 原生input的标签身上的属性 类型
// React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>   鼠标放在 普通input标签上 看能看到
// 2 添加一些自定义的属性
// 右侧 显示的内容
// 错误提示
interface IInputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  // 右侧 显示的内容
  extra?: ReactNode;
  // 错误提示
  errorMsg?: string;
}

export default function index({ extra, errorMsg, ...props }: IInputProps) {
  return (
    <div className={styles.root}>
      <input {...props} />
      {errorMsg && <div className="validate">{errorMsg}</div>}
      {extra && <div className="extra">{extra}</div>}
    </div>
  );
}
